<template>
	<!-- 我的  -个人中心 -->
	<view class="" :class="{'light':theme=='light'}">
		<view class="pt50 pb30 plr20 bg2c white">
			<view class="flex alcenter between">
				<view class="w100">
					<view class="flex alcenter">
						<!-- <image src="../../static/image/head.png" mode="" class="wt50 h50 radius50p"></image> -->
						<!-- <image :src="info.avatar?info.avatar:defaultImg" @click="unImg" class="wt50 h50 radius50" mode=""></image> -->
						<image :src="info.avatar?info.avatar:defaultImg" class="wt50 h50 radius50" mode=""></image>
						<view class="pl10">
							<view class="flex between alcenter">
								<!-- <view class="ft24 bold mb5">{{info.username}}</view> -->
								<view class="ft24 bold mb5" v-if="info.username">{{ info.username | noPassByMobile}}</view>
								<view class="ft18 mb5" v-else>{{ info.email | noPassByMobile}}</view>
								<!-- <switch @change="switchChange" :checked="theme=='light' ?  false:true "/> -->
							</view>
							<!-- <view class="ft14 mb5">UID:{{ info.id }}</view> -->
						</view>
					</view>
				</view>
				<view>
					<!-- <image src="/static/image/mores.png" class="wt20 h20"></image> -->
				</view>
			</view>
		</view>
		<view class="pb30">
			<!-- <view class="bgPart">
				<navigator url="/pages/ltc/dog" class="flex alcenter ptb10 between plr20 ft14">
					<view class="flex alcenter">
						<image src="/static/image/dog.png" class="wt20 h20"></image>
						<text class="ml10">智能狗等级</text>
					</view>
					<view class="flex alcenter">
						<text class="blue4 pr10">{{dog?info.current_account.financial_product.name : '暂无'}}</text>
						<image src="/static/image/mores.png" class="wt15 h15"></image>
					</view>
				</navigator>
			</view> -->
			<view class="bgPart mt10">
				<navigator url="/pages/assets/assets" class="flex alcenter ptb10 between plr20 ft14 bdb_blue3">
					<view class="flex alcenter">
						<image src="/static/image/mine/m3.png" class="wt20 h20"></image>
						<text class="ml10">{{$t('mine.assets')}}</text>
					</view>
					<image src="/static/image/mores.png" class="wt15 h15"></image>
				</navigator>
				<navigator v-if="token" url="/pages/mine/real_authentication" class="flex alcenter ptb10 between plr20 ft14 bdb_blue3">
					<view class="flex alcenter">
						<image src="/static/image/mine/rz.png" class="wt20 h20"></image>
						<text class="ml10">{{ $t('authentication.renzheng') }}</text>
					</view>
					<image src="/static/image/mores.png" class="wt15 h15"></image>
				</navigator>
				<!-- <navigator url="/pages/assets/bindMentionAddress" class="flex alcenter ptb10 between plr20 ft14 bdb_blue3">
					<view class="flex alcenter">
						<image src="/static/image/mine/bind.png" class="wt20 h20"></image>
						<text class="ml10">{{ $t('bind.bindAddr') }}</text>
					</view>
					<image src="/static/image/mores.png" class="wt15 h15"></image>
				</navigator> -->
				<navigator url="/pages/mine/security" class="flex alcenter ptb10 between plr20 ft14">
					<view class="flex alcenter">
						<image src="/static/image/mine/safe.png" class="wt20 h20"></image>
						<text class="ml10">{{ $t('login.security') }}</text>
					</view>
					<image src="/static/image/mores.png" class="wt15 h15"></image>
				</navigator>
			<!-- </view>
			<view class="bgPart mt10"> -->
			
				<navigator v-if="token" :url="'/pages/mine/invite?code=' + info.invite_code" class="flex alcenter ptb10 between plr20 ft14 bdb_blue3">
					<view class="flex alcenter">
						<image src="/static/image/mine/fx.png" class="wt20 h20"></image>
						<text class="ml10">{{ $t('home.myshare') }}</text>
					</view>
					<image src="/static/image/mores.png" class="wt15 h15"></image>
				</navigator>
				
				<!-- <navigator url="/pages/mine/team" class="flex alcenter ptb10 between plr20 ft14 bdb_blue3">
					<view class="flex alcenter">
						<image src="/static/image/mine/td.png" class="wt20 h20"></image>
						<text class="ml10">{{$t('mine.myTeam')}}</text>
					</view>
					<image src="/static/image/mores.png" class="wt15 h15"></image>
				</navigator> -->
			<!-- 	<navigator url="/pages/assets/sharelog" class="flex alcenter ptb10 between plr20 ft14 bdb_blue3">
					<view class="flex alcenter">
						<image src="/static/image/mine/m6.png" class="wt20 h20"></image>
						<text class="ml10">推广分润</text>
					</view>
					<image src="/static/image/mores.png" class="wt15 h15"></image>
				</navigator> -->
			</view>
			<view class="bgPart mt10">
			<!-- 	<navigator url="/pages/mine/workOrder" class="flex alcenter ptb10 between plr20 ft14 bdb_blue3">
					<view class="flex alcenter">
						<image src="/static/image/mine/fk.png" class="wt20 h20"></image>
						<text class="ml10">提交工单</text>
					</view>
					<image src="/static/image/mores.png" class="wt15 h15"></image>
				</navigator> -->
				<navigator url="/pages/mine/about" class="flex alcenter ptb10 between plr20 ft14">
					<view class="flex alcenter">
						<image src="/static/image/account_about_image.png" class="wt20 h20"></image>
						<text class="ml10">{{ $t('about.abt') }}</text>
					</view>
					<image src="/static/image/mores.png" class="wt15 h15"></image>
				</navigator>
				<!--选择语言-->
				<view class="flex alcenter ptb10 between plr20 ft14" @tap="actionSheetTap">
					<view class="flex alcenter">
						<image src="/static/image/mine/lang.png" class="wt20 h20"></image>
						<text class="ml10">{{$t('mine.language')}}</text>
					</view>
					<view class="flex alcenter">
						<text class="plr10" v-if="languages[index]">{{languages[index].name}}</text>
					    <uni-icons type="arrowdown" color="#ddd" size="20" />
					</view>
				</view>		
				<!-- 换肤 -->
				<view  class="flex alcenter ptb10 between plr20 ft14 bdb_blue3">
					<view class="flex alcenter">
						<image src="/static/image/mine/dark.png" class="wt20 h20"></image>
						<text class="ml10">{{$t('about.theme')}}</text>
					</view>
					<switch @change="switchChange" :checked="theme=='light' ?  false:true "/>
				</view>
			</view>
			<view class="mt30 plr20" v-if="token">
				<button type="primary" size="default" class="ft14" @click="logout">{{ $t('home.logout') }}</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import {domain} from '@/common/domain.js'
	export default {
		data() {
			return {
				defaultImg:require('../../static/image/head.png'),
				token: '',
				info: '',
				languages: [
					{lang:'en', name: 'English', img: '/static/image/en.png' },
					{lang:'hk', name: '繁體中文', img: '/static/image/hk.png' },
					{lang:'jp', name: '日本語', img: '/static/image/jp.png' },
					// {lang:'zh', name: '中文', img: '/static/image/zh.png' },
				],
				listItem:['English','繁體中文','日本語'], // '中文',
				lang: 'en',
				index:0,
				dog:false
			};
		},
		filters: {
			toFixed2: function(value, options) {
				value = Number(value);
				return value.toFixed(2);
			},
			// 星号处理手机号
			noPassByMobile:function(str){
				if(null != str && str != undefined){
					var pat=/(\d{3})\d*(\d{4})/;
					return str.replace(pat,'$1****$2');
				} else {
					return "";
				}
			},
		},
		computed: {
			...mapState(['theme'])
		},
		onLoad() {
			var token = uni.getStorageSync('token');
			this.lang = uni.getStorageSync('lang') || 'en';
			this.languages.map((item,index)=>{
				if(item.lang == this.lang){
					return this.index = index
				}
			})
			this.changeFooter();
			// console.log(token);
			if (token) {
				this.getUserInfo();
			} else {
				console.info('asfasafafsfas');
				uni.reLaunch({
					url: '/pages/mine/login'
				})
			}
		},
		onShow() {
			this.$utils.setThemeTop(this.theme);
			this.$utils.setThemeBottom(this.theme);
			this.token = uni.getStorageSync('token');
		},
		methods: {
			changeFooter() {
				uni.setTabBarItem({
					index: 0,
					text: this.$t('market.home')
				});
				// uni.setTabBarItem({
				// 	index: 1,
				// 	text: this.$t('fastExchange.content8')
				// });
				uni.setTabBarItem({
					index: 1,
					text: this.$t('market.market')
				});
				uni.setTabBarItem({
					index: 2,
					text: this.$t('market.c1')
				});
				uni.setTabBarItem({
					index: 3,
					text: this.$t('home.my')
				});
				// uni.setTabBarItem({
				// 	index: 4,
				// 	text: this.$t('wallet.wallet')
				// });
				// uni.setTabBarItem({
				// 	index: 5,
				// 	text: this.$t('mine.mine')
				// });
			},
			// 切换主题
			switchChange(e){
				var ui  = (this.theme == 'light') ? 'dark' : 'light';
				this.$store.dispatch("changeTheme",ui);
				this.$utils.setThemeTop(this.theme);
				this.$utils.setThemeBottom(this.theme);
			},
			// 语言切换
			changeLang(lang) {
				this.lang = lang;
				uni.setStorageSync('lang', lang);
				this.$i18n.locale = lang;
				this.changeFooter();
			},
			actionSheetTap() {
				uni.showActionSheet({
					title:'',
					itemList: this.listItem,
					success: (e) => {
						this.index = e.tapIndex;
						let lang = this.languages[this.index].lang;
						this.lang = lang;
						uni.setStorageSync('lang', lang);
						this.$i18n.locale = lang;
						this.changeFooter();
					}
				})
			},
			//获取用户信息
			getUserInfo() {
				var that = this;
				// this.$utils.initDataToken({ url: 'user/info', data: {}, type: 'get' }, (res, msg) => {
				// 	uni.stopPullDownRefresh();
				// 	uni.setStorageSync('uid', msg.id);
				// 	that.info = res;
				// 	that.dog = res.current_account.financial_product==null ? false :true;
				// });
				that.info = uni.getStorageSync("userInfo");
			},
			unImg(){
				var that=this;
				uni.showLoading({
					
				})
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: '/api/common/image_upload', //仅为示例，非真实的接口地址
							// #ifdef APP-PLUS
							url:domain+'/api/common/image_upload',
							// #endif
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								var data=JSON.parse(uploadFileRes.data);
								if(data.code==1){
									that.info.avatar=data.data.url;
									that.editHead();
								}
							}
						});
					}
				});
			},
			editHead(){
				this.$utils.initDataToken({ url: 'user/update_info', data: {avatar:this.info.avatar}, type: 'post' }, (res, msg) => {
					this.$utils.showLayer(msg);
				});
			},
			//退出登录
			logout() {
				uni.removeStorageSync('token');
				this.$utils.initDataToken({ url: 'uc/loginout', data: {}, type: 'post' }, (res, msg) => {
					uni.clearStorage();
					this.$utils.showLayer(msg);
					uni.reLaunch({
						url: '/pages/mine/login'
					})
				});
			},
			//升级节点
			up(){
				this.$utils.initDataToken({ url: 'user/level_up_node', data: {}, type: 'post' }, (res, msg) => {
					console.log(res,msg)
					this.$utils.showLayer(msg);
					this.getUserInfo();
				});
			}
		},
		onPullDownRefresh() {

		}
	};
</script>

<style>
</style>
